<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>吸顶灯</title>
        <style>
            .top_context{
                width: 100%;
                height: 200px;
                text-align: center;
                line-height: 200px;
            }
            .sticky_element{
                width: 100%;
                height: 30px;
                background: #000;
                color: #eee;
                text-align: center;
                line-height: 30px;
            }
            .main_context{
                height: 8000px;
                background-color: #e2fffe;
            }
            /* 切换样式：吸顶灯卡页面顶部 */
            .sticky{
                position: fixed;
                top: 0;
                width: 100%;
            }
        </style>
        <script src="../js/jquery-1.11.1.js"></script>
        <script>
            /* ready()事件源语法：    $(document).ready(function(){}); 
                                    简写$(function(){});
            总结：页面上元素全部加载完毕，在执行JQ相关操作
            script元素放在最后一个body位置【可不写】
            */
            
            $(function(){
                // 固定值：页面顶部到吸顶灯位置--BOM语法
                // offset() 获取或者设置元素相对于文档偏移量
                // offerset()   从顶部到
                var se=$(".sticky_element").offset().top;
                
                // 滚动值：BOM对象+事件源
                // $(window)    抓取页面window对象，监听窗口事件：窗口改变、滚动
                // 理解：实时抓取页面滚动值
                $(window).scroll(function(){
                    // 滚动值：获取页面滚动位置
                    // scrollTop()  获取页面滚动垂直距离
                    var st=$(window).scrollTop();
                    // 判断   固定值大于滚动值，滚动超过200px，实现切换：吸顶效果
                    if(st>se){
                        // 条件成立：大于200px   切换吸顶效果
                        $(".sticky_element").addClass("sticky");
                    }else{
                        // 条件不成立：小于200px
                        $(".sticky_element").removeClass("sticky");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="top_context">
            顶部元素区域
        </div>
        <div class="sticky_element">
            我是吸顶元素
        </div>
        <div class="main_context">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur ipsam mollitia nisi facilis, porro omnis iste, dolore officia rerum dicta quia accusantium tempora commodi excepturi vitae corrupti ad architecto tempore?
            Necessitatibus doloribus debitis, eum quas repudiandae consectetur blanditiis quae facere dolorem ducimus distinctio voluptatum labore odio veritatis qui architecto, itaque at. Veniam id fuga itaque tempore. Incidunt eligendi eum ducimus.
            Laborum nemo rem, aut sunt eveniet tempora illum placeat et, ad velit explicabo quis ab animi odio, illo eum? Corporis dolorem iusto et assumenda? Tempore similique aut cum unde placeat.
            Quod deserunt reiciendis, distinctio provident impedit dolorum nulla placeat, doloremque ratione accusantium at, voluptates obcaecati error facilis. Adipisci, veniam consequuntur, alias vitae amet nobis tenetur sit iste consequatur doloribus porro.
            Iste sit voluptate excepturi quidem, omnis repudiandae modi fugit? Hic, vel voluptatibus doloremque rerum corrupti iure quisquam esse dolore, reprehenderit dolor adipisci cumque, tempore culpa aperiam modi. Odit, velit? Excepturi.
        </div>
        
    </body>
</html>
<!-- 
 /*  鼠标移动到顶部内容区域---弹出文本：我是顶部元素 */
$(".top_context").mouseenter(function(){
       BOM形式输出：浏览器弹窗输出文本效果
    alert("我是顶部元素");
 });
 
 
  吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
  思路：1.鼠标滚动，滚动吸顶灯
       2.页面顶部到吸顶灯位置：200px，大于200px
       3.追加第一个样式：固定定位，页面顶部位置
 
  1.追加样式：吸顶灯卡在页面顶部
  2.固定值：页面顶部到吸顶灯距离
  3.固定值>滚动值，滚动范围超出200px 实现切换
 -->